<template>
  <div>
    <el-form-item label="省份" :required="required">
      <el-select v-model="localSelectedProvinceCode" placeholder="选择省份" @change="onProvinceChange">
        <el-option v-for="province in provinces" :key="province.code" :label="province.name" :value="province.code" />
      </el-select>
    </el-form-item>

    <el-form-item label="城市" :required="required">
      <el-select v-model="localSelectedCityCode" placeholder="选择城市" @change="onCityChange"
        :disabled="!localSelectedProvinceCode">
        <el-option v-for="city in cities" :key="city.code" :label="city.name" :value="city.code" />
      </el-select>
    </el-form-item>

    <el-form-item label="区" :required="required">
      <el-select v-model="localSelectedAreaCode" placeholder="选择区" :disabled="!localSelectedCityCode">
        <el-option v-for="area in areas" :key="area.code" :label="area.name" :value="area.code" />
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import { onMounted, ref, watch } from 'vue';
import cityData from './cityData.json';

export default {
  name: 'CitySelector',
  props: {
    required: {
      type: Boolean,
      default: false
    },
    province: {
      type: String,
      default: ''
    },
    city: {
      type: String,
      default: ''
    },
    area: {
      type: String,
      default: ''
    }
  },
  emits: ['update:province', 'update:city', 'update:area'],
  setup(props, { emit }) {
    const provinces = ref(cityData);
    const cities = ref([]);
    const areas = ref([]);

    let isInitialSetup = true;

    const localSelectedProvinceCode = ref(props.province);
    const localSelectedCityCode = ref(props.city);
    const localSelectedAreaCode = ref(props.area);

    onMounted(()=>{
      setTimeout(()=>{
        isInitialSetup = false
      },1000)
    })

    watch(localSelectedProvinceCode, (newVal) => {
      if (newVal) {
        const province = provinces.value.find(p => p.code === newVal);
        if (!province) {
          cities.value = [];
          areas.value = [];
          emit('update:province', '');
          emit('update:city', '');
          emit('update:area', '');
        } else {
          cities.value = province.children
        
          if (!isInitialSetup) {
            localSelectedCityCode.value = '';
            localSelectedAreaCode.value = '';
            areas.value = [];
            emit('update:province', newVal);
            emit('update:city', '');
            emit('update:area', '');
          }
        }

      }
    });

    watch(localSelectedCityCode, (newVal) => {
      if (newVal) {
        const city = cities.value.find(c => c.code === newVal);
        areas.value = city ? city.children : [];
        if (!isInitialSetup) {
          localSelectedAreaCode.value = '';
          emit('update:city', newVal);
          emit('update:area', '');
        }
      }
    });

    watch(localSelectedAreaCode, (newVal) => {
      emit('update:area', newVal);
    });

    watch(() => props.province, (newVal) => {
      localSelectedProvinceCode.value = newVal;
    });

    watch(() => props.city, (newVal) => {
      localSelectedCityCode.value = newVal;
    });

    watch(() => props.area, (newVal) => {
      localSelectedAreaCode.value = newVal;
    });

    return {
      provinces,
      cities,
      areas,
      localSelectedProvinceCode,
      localSelectedCityCode,
      localSelectedAreaCode,
    };
  }
};
</script>
